<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="dialogVisible1=true">模拟上传</el-button>
          </el-col>
        </el-card>
        <el-dialog
          title="上传"
          class="dialog"
          :visible.sync="dialogVisible1"
          width="30%"
        >
          <el-alert
            title="支持jpg、jpeg、png格式，单次可最多选择50张图片，每张不可大于2M，如果大于2M会自动为您过滤"
            type="info"
            :closable="false"
            effect="dark"
          >
          </el-alert>
          <el-upload
            action="#"
            style="margin-top: 20px"
            :multiple="true"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}" style="position: relative;height: 100%;">
              <img
                style="object-fit: contain;position: absolute;top: 0;left: 0;"
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
             </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" class="Zing" title="查看大图" append-to-body>
            <el-image
              style="width: 360px; height: 640px"
              :src="dialogImageUrl"
              fit="contain"
            ></el-image>
          </el-dialog>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false" type="primary" size="medium">关 闭</el-button>
            <el-button type="success" @click="upload" size="medium">开始上传</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'upload',
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisible1: false,
      disabled: false,
    }
  },
  methods: {
    handleRemove(file) {
      console.log(file)
    }
    ,
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
    ,
    handleDownload(file) {
      console.log(file)
    }
    ,
    upload() {
        this.$message({
          message: '模拟上传成功',
          type: 'success'
        })
        this.dialogVisible1 = false
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  ::v-deep.dialog .el-dialog {
    width: 900px !important;
    height: 670px !important;
  }

  ::v-deep .Zing .el-dialog {
    width: 716px !important;
  }

  ::v-deep.el-dialog__footer {
    margin-top: 285px;
  }
}
</style>
